<template>
    <!-- 系统日志监控 -->
    <div class="app-container">
        <div class="bg-container">
            <el-form ref="sysLogForm" :model="form" label-width="100px" label-suffix=":" inline>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="主机">
                            <!-- 选择框内容 multiple-->
                            <el-select v-model="form.computer_name" placeholder="请选择主机" style="width: 220px" @change="bindChangeSelect">
                                <el-option v-for="item in allComputerList" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button icon="Search" type="primary" @click="bindSearch">搜索</el-button>
                        <el-button icon="Refresh" @click="reset">重置</el-button>    
                        <el-button icon="Caret-right" type="primary" @click="batchStartMonitoring">批量开始监控</el-button>                       
                    </el-col>
                </el-row>
            </el-form>

            <el-table v-loading="loading" :data="tableData" :show-overflow-tooltip="true" :stripe="true" @selection-change="handleSelectionChange" max-height="500px">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="默认路径" width="200px" align="center" prop="defaultPath"></el-table-column>
                <el-table-column label="操作系统" width="120px" align="center" prop="opsType"></el-table-column>
                <el-table-column label="监控状态" width="200px" align="center" prop="logPath">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.monitoringStatus === 1">监控中</el-tag>
                        <el-tag type="error" v-if="scope.row.monitoringStatus === 0">未监控</el-tag>
                        <el-tag type="warning" v-if="scope.row.monitoringStatus === 2">监控关闭</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="日志名称" width="120px" align="center" prop="logName"></el-table-column>
                <el-table-column label="描述" align="center" prop="logFunction"></el-table-column>
                <el-table-column label="操作" width="150px" align="center">
                    <template #default="scope">
                        <el-button plain v-if="scope.row.monitoringStatus === 0" type="primary"
                                @click="startMonitoring(scope.row)">
                                监控
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script setup>
import { listAllComputer, getSystemLogPageInfo, putSystemLogMonitor } from "@/api/computer";


import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

const loading = ref(false);
const tableData = ref([]);
const selectedList = ref([]); // 选中的列表
// const pageInfo = reactive({
//     pageNo: 1,
//     pageSize: 10,
//     total: 0,
// })
const form = reactive({
    computer_name: "",
    computer_id: null
});

const allComputerList = ref([]);
// 查询主机
const getAllComputer = () => {
    listAllComputer().then(response => {
        if (response.data) {
            allComputerList.value = response.data;
            form.computer_name = allComputerList.value[0].name;
            form.computer_id = allComputerList.value[0].id;
            bindSearch();
        }
    });
}

// 绑定选择框内容
const bindChangeSelect = (id) => {
    form.computer_id = id;
    bindSearch();
}

const bindSearch = () => { 
    loading.value = true;
    getSystemLogPageInfo({
        id: form.computer_id
    }).then(response => {
        if (response.data) {
            tableData.value = response.data;
        }
        loading.value = false;
    });
}

const reset = () => {  
    form.computer_name = "";
    proxy.$refs.sysLogForm.resetFields();
}


const handleSelectionChange = (selection) => {
    selectedList.value = selection;
}

// 批量开始监控
const batchStartMonitoring = () => {
    const _selectedList = selectedList.value;
    if(_selectedList.length === 0){
        proxy.$message.info("请选择需要监控的日志");
        return;
    }
    startMonitoring(_selectedList, true)
}

// 开始监控
const startMonitoring = (row, isMore = false) => {
    putSystemLogMonitor( isMore ? row : [ row ]
    ).then(response => {
        proxy.$message.success("开始监控成功");
        bindSearch();
    });
}

// 初始化页面
const init = async () => {
    await getAllComputer();
}

init();

</script>

<style lang="scss" scoped></style>